<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文章信息展示</title>
    <style>
      body {
        margin: 0;
      }

      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      a {
        text-decoration: none;
        color: #404040;
      }

      .wrap {
        width: 600px;
        margin: 0 auto;
      }

      .news-list {
        width: 600px;
      }

      .news {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        border-bottom: 1px solid #999;
      }

      .info {
        display: flex;
        width: 170px;
        justify-content: space-between;
        font-size: 12px;
        color: #888;
      }

      .tips {
        display: flex;
        width: 100px;
        justify-content: space-between;
      }

      .news-list li:nth-child(5) {
        border-bottom: none;
      }

      .pagination {
        display: flex;
        width: 210px;
        text-align: center;
        background-color: rgb(252, 238, 238);
        border-radius: 25px;
        overflow: hidden;
        margin: 0 auto;
        justify-content: center;
      }

      .pagination a {
        width: 30px;
        line-height: 30px;
        color: #404040;
      }

      .pagination a:nth-child(1) {
        transform: rotate(-45deg);
      }

      .next {
        transform: rotate(45deg);
      }

      .pagination a:hover {
        color: rgb(247, 73, 73);
      }

      .news div {
        width: 420px;
      }
    </style>
  </head>

  <body>
    <div class="wrap">
      <ul class="news-list">
        <li class="news">
          <a href="javascript:;">
            <img src="./img/img.png" alt="" />
          </a>
          <div>
            <h3>
              <a href="javascript:;"
                >18人死伤！韩国一男子纵火后持凶器伤害避险邻居</a
              >
            </h3>
            <div class="info">
              <span class="tips"
                ><span>纵火</span><span>韩国</span><span>逮捕</span></span
              >
              <!-- <span class="line"></span> -->
              <span class="time">| &nbsp;&nbsp;1小时前</span>
            </div>
          </div>
        </li>
      </ul>
      <div class="pagination">
        <a href="javascript:;" class="prev">⌜</a>
            <!-- <a href="javascript:;">1</a>
            <a href="javascript:;">2</a>
            <a href="javascript:;">3</a>
            <a href="javascript:;">4</a>
            <a href="javascript:;">5</a> -->
            <a href="javascript:;" class="next">⌝</a> 
      </div>
    </div>
    <script src="./axios.js"></script>
    <script src="./jquery-1.11.3.js"></script>
    <script>
      // 通过ajax获取数据
      // axios  jq

      axios({
        url: "/getdata",
      }).then((res) => {
        // console.log(res.data);
        // let page = res.data.length;
        renderDom(res.data.data);
        // console.log(res.data.dataLength);
        for(let i=1;i<=res.data.dataLength;i++){
          let page = document.createElement("a");
          page.innerHTML=i;
          page.onclick = function(){
            axios.get("/getdata?page="+i).then(res=>{
              renderDom(res.data);
            })
          }
        document.querySelector(".pagination").insertBefore(page,document.querySelector(".next"));

        }
      });

      function renderDom(data) {
        let ulEle = document.querySelector(".news-list");
        ulEle.innerHTML = "";
        data.forEach((item) => {
          let liEle = document.createElement("li");
          liEle.classList.add("news");
          liEle.innerHTML = `<a href="/detail?id=${item._id}">
                            <img src="${item.imgUrl}" alt="">
                        </a>
                        <div>
                            <h3>
                                <a href="javascript:;">${item.title}</a>
                            </h3>
                            <div class="info">
                                <span class="tips"><span>纵火</span><span>${item.country}</span><span>逮捕</span></span>
                                <!-- <span class="line"></span> -->
                                <span class="time">| &nbsp;&nbsp;1小时前</span>
                            </div>
                        </div>`;
          ulEle.appendChild(liEle);
        }); //分页渲染
      }

      // document.querySelector(".pagination").insertBefore()
      // let pagination = document.querySelector(".pagination");
      // newpage = `<a href="javascript:;" page="1"  class="prev">⌜</a>`;
      // let pagenum = Math.ceil(13 / 3);
      // let html = "";
      // for (i = 1; i < pagenum + 1; i++) {
      //   html += `<a class="shuzi" page="${i}" href="javascript:;">${i}</a>`;
      //   // /detail?page=${i}
      // }
      // newpage += html;
      // newpage += `<a href="javascript:;" page="${pagenum}" class="next">⌝</a>`;
      // pagination.innerHTML = newpage; //分页渲染

      // //事件委托
      // $(".pagination").on("click", ".shuzi", function () {
      //   // console.log($(".prev").attr("href").html("3"));
      //   if ($(this).html() == 1) {
      //     $(".prev").attr("page", $(this).html() * 1);
      //   } else {
      //     $(".prev").attr("page", ($(this).html() * 1 - 1));
      //   }
      //   if ($(this).html() == pagenum) {
      //     $(".next").attr("page", $(this).html());
      //   } else {
      //     $(".next").attr("page", ($(this).html() * 1 + 1));
      //   }
        
      //   // $(".next").attr("href")=("detail?page="+$(this).html())
      //   // $(this).html()
      //   // axios({
      //   //   url: "/getdata",
      //   // }).then((res) => {
      //   //   // console.log(res.data);
      //   //   // let page = res.data.length;
      //   //   renderDom(res.data);
      //   // });
      // });
      // $(".pagination").on("click", "a", function () {
      //       if($(this).attr("class") == "prev"){//当为点击prev如果page的值大于1就给page的值赋值--
      //           if($(this).attr("page")>1){
      //               $(this).attr("page",$(this).attr("page")-1);}
      //           // }else if($(this).attr("page")>1)
      //       }
      //       if($(this).attr("class") == "next"){//当为点击prev如果page的值小于最大值就给page的值赋值++
      //           if($(this).attr("page")<pagenum){
      //               $(this).attr("page",$(this).attr("page")*1+1);
      //           }
      //       }
      //       let num = $(this).attr("page")
      //        axios({
      //          url: "/getdata?page="+num,
      //   }).then((res) => {
      //     // console.log(res.data);
      //     // let page = res.data.length;
      //     renderDom(res.data);
      //   });
      // })

    </script>
  </body>
</html>
